
"use client"
import React, { useEffect, useState } from 'react';
import { Button, DatePicker, Divider, Input, Menu, Select, Space, Table, Tag ,Modal, Checkbox, Form,Popconfirm } from 'antd';
import type { MenuProps, TableProps } from 'antd';
import { useRouter } from 'next/navigation';
import {
  CheckCircleFilled,
  EditFilled,
  VerticalAlignTopOutlined,
  DeleteFilled,
  SearchOutlined,RedoOutlined,ZoomInOutlined

} from '@ant-design/icons';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
  id: number
  key: string
  name: string
  Customer: string
  stage: string
  bjnum: string
  price: string
  time: number
  days: number
}
import * as API from '../../../../../utils/https'




const App: React.FC = () => {
  const [table,settable]=useState([])
  const [title,settitle]=useState('')
  const [data,setdata]=useState()
  useEffect(()=>{
      API.http_table().then(res=>{settable(res);
      })    
  },[])
  const router = useRouter()
  const [current, setCurrent] = useState('mail');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };
  
  const handleOk = () => {
    setIsModalOpen(false);
  };
  
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
    router.push(e.key)
  };
  //多选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
let handTop=(id)=>{
  const taritem=table.find(item=>item.id==id)
  const newlist=table.filter(item=>item.id!=id)
  settable([taritem,...newlist])
}
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,

    ]
  };const columns: TableProps<DataType>['columns'] = [
    {
      title: ' 订单标题',
      dataIndex: 'name',
      render: (name) => <div style={{ color: 'rgb(0,121,254)' }}>{name}</div>,
    },
    {
      title: '关联客户',
      dataIndex: 'Customer',
      render: (Customer) => <div style={{ color: 'rgb(0,121,254)' }}>{Customer}</div>,
    },
    {
      title: ' 订单阶段',
      dataIndex: 'stage'
    },
    {
      title: '报价记录',
      dataIndex: 'bjnum',
      render: (bjnum) => <div style={{ color: 'rgb(0,121,254)' }}>{bjnum}</div>,
    },
    {
      title: '报价总金额',
      dataIndex: 'price'
    },
    {
      title: '最后跟进',
      dataIndex: 'time',
      render: (time) => <div>{new Date(time).toLocaleString()}</div>,
    },
    {
      title: '未跟进天数',
      dataIndex: 'days'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a  onClick={()=>{
       router.push(`/fff/dingdan/adddingdan/${record.id}`)
        }}><EditFilled />编辑</a>
          <a onClick={()=>handTop(record.id)}><VerticalAlignTopOutlined />置顶</a>
          <Popconfirm
    title="删除框"
    description="确定要删除吗?"
    okText="确定"
    cancelText="取消"
    onConfirm={()=>{  setdata(API.http_deltable(record.id))
      location.reload()
  }}
  >
   <a><DeleteFilled />删除</a>
  </Popconfirm> 
        </Space>
      ),
    },
  ];
  
  //表格数据
  
  //三级导航数据
  type MenuItem = Required<MenuProps>['items'][number];
  
  const items: MenuItem[] = [
    {
      key: '/fff/dingdan/allding',
      label: (
        <div >
          全部订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/mydingdan',
      label: (
        <div>
          我的订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashudingdan',
      label: (
        <div>
          下属订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashuxiezuo',
      label: (
        <div>
          下属写作
        </div>
      ),
    },
    {
      key: '/fff/dingdan/woxiezuo',
      label: (
        <div>
          我的协作
        </div>
      )
    },
    {
      key: '/fff/dingdan/adddingdan',
      label: (
        <div>
          添加订单
        </div>
      ),
    }
  ];
  let [title1,settitle1]=useState("")
  let [title2,settitle2]=useState(null)
  let [title3,settitle3]=useState(null)
  let handersearch=()=>{
    API.http_table(title1, title2, title3).then((res)=>{
      console.log(res, "| res.data")
      settable(res)
    }
  ).catch(err=>{
    console.error("获取失败",err)
  })
  //   API.http_table("test", "", "").then(res =>   console.log(res))
  //     API.http_table("", "初步洽谈", "").then(res =>   console.log(res))
  //     API.http_table("", "", "订单来源").then(res =>   console.log(res))

  }
  let reset=()=>{
      settitle1("")
      settitle2(null)
      settitle3(null)
      API.http_table().then(res=>{settable(res);
      })    
  }
  return (
    <>
      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items}/>
      <Divider />
      <div>
        <Space>

          <Input placeholder="搜索关键词" value={title1} onChange={(e)=>{settitle1(e.target.value)}}/>
          <Select
            placeholder=" 订单阶段"
            style={{ width: 150 }}
            value={title2}
            onChange={(e)=>{
             settitle2(e)
            }}
            options={[
              { value: '初步洽谈', label: '初步洽谈' },
              { value: '未谈拢', label: '未谈拢' },
              { value: '已完成', label: '已完成' },
            ]}
          />
          <Select
            placeholder=" 订单来源"
            value={title3}
            onChange={(e)=>{settitle3(e)}}
            style={{ width: 150 }}
            options={[
              { value: '深圳市亿恩科技有限公司', label: '深圳市亿恩科技有限公司' },
              { value: '奥科集团', label: '奥科集团' },
              { value: '美的集团', label: '美的集团' },
            ]}
          />
          <Select
            placeholder="成交机率"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <Button type="primary" onClick={(e)=>{handersearch()}}><SearchOutlined />查询</Button>
          <Button onClick={()=>{reset()}}><RedoOutlined />重置</Button>
          <Button style={{ color: 'rgb(0,121,254)' }}><ZoomInOutlined />高级搜索</Button>
        </Space>
        <Divider />
      </div>
      <div>
      <Button type="primary" onClick={()=>{
       router.push(`/fff/dingdan/adddingdan/none`)
      }}>
        添加
      </Button>
  
      </div>
      <Table<DataType> rowSelection={rowSelection} bordered columns={columns} rowKey='id' dataSource={table} pagination={{ defaultPageSize: 8 }} />
    </>
  )

};

export default App;